<script setup lang="ts">
	import {
		ref,
		reactive,
		computed,
		toRefs,
		watchEffect,
		onMounted,
		getCurrentInstance,
		watch,
		toRaw,
		nextTick,
	} from 'vue'
	import { Plus } from '@element-plus/icons-vue'
	import { UploadFilled } from '@element-plus/icons-vue'
	import { ElMessage, UploadFile, UploadProps, uploadProps } from 'element-plus'
	import commonFunction from '../utils/commonFunction'
	import { useStore } from 'vuex'
	import { useRouter } from 'vue-router'
	import * as modelApi from '../apis/modelApi'

	const store = useStore()
	const { proxy } = getCurrentInstance()!

	// 判断类型
	const router = useRouter()
	const type: any = router.currentRoute.value.meta.type
	// console.log(type)

	// 测试图片 调用了公共方法中的方法生成图片路径
	// const pic1 = commonFunction.getAssetsImages('1.jpg')
	// const pic2 = commonFunction.getAssetsImages('2.png')

	const stepIndex = computed(() => {
		return store.state.pageStore.resultInfo[type].stepIndex
	})

	const category = computed(() => {
		return store.state.pageStore.category
	})

	const fileList = reactive([])

	var base64Urls = reactive([])

	const base64Url = ref('')

	const dialogImageUrl = ref('')
	const dialogVisible = ref(false)
	const imageUrl = ref('')

	const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
		base64Urls.pop()
		console.log(uploadFile, uploadFiles)
	}

	const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
		dialogImageUrl.value = uploadFile.url!
		dialogVisible.value = true
	}

	let fileObj: any
	const Upload = (response) => {
		const { file } = response
		imageUrl.value = URL.createObjectURL(file!)
		console.log(file!)
		fileObj = getFile(file)
		blobToBase64(file)
	}

	const getResultImg = () => {
		switch (type) {
			// 变化检测
			case 0: {
				if (base64Urls.length == 2) {
					store.state.pageStore.resultInfo[type].isValidation = true
				}
				if (
					stepIndex.value == 1 &&
					store.state.pageStore.resultInfo[type].isValidation == false
				) {
					proxy.$msg.warning('变化检测所提交的检测图片需为两张，请重新选择😣')
					setTimeout(() => {
						store.state.pageStore.resultInfo[type].stepIndex = 0
					}, 500)
				}
				if (stepIndex.value == 2) {
					modelApi
						.getCdImageBase64({ sendImgBase64: base64Urls })
						.then((res) => {
							console.log(res)
							store.state.pageStore.resultInfo[type].base64Urls = base64Urls
							store.state.pageStore.resultInfo[type].resultBase64Url = res
							// base64Urls = []
							// base64Urls.length = 0
						})
						.catch((err) => {
							console.log(err)
						})
				}
				break
			}

			// 目标检测
			case 1: {
				if (base64Urls.length >= 1) {
					store.state.pageStore.resultInfo[type].isValidation = true
				}
				if (
					stepIndex.value == 1 &&
					store.state.pageStore.resultInfo[type].isValidation == false
				) {
					proxy.$msg.warning('该板块所提交的检测图片请至少选择一张😣')
					setTimeout(() => {
						store.state.pageStore.resultInfo[type].stepIndex = 0
					}, 500)
				}
				if (stepIndex.value == 2) {
					modelApi
						.getOdImageBase64({
							sendImgBase64: base64Urls,
							sendCategory: checkedCategorys.value,
						})
						.then((res) => {
							console.log(res)
							store.state.pageStore.resultInfo[type].base64Urls = base64Urls
							store.state.pageStore.resultInfo[type].resultBase64Url = res
							// base64Urls = []
							// base64Urls.length = 0
						})
						.catch((err) => {
							console.log(err)
						})
				}
				break
			}

			// 目标提取
			case 2: {
				if (stepIndex.value == 1 && base64Urls.length >= 1) {
					store.state.pageStore.resultInfo[type].isValidation = true
				}
				if (
					stepIndex.value == 1 &&
					store.state.pageStore.resultInfo[type].isValidation == false
				) {
					proxy.$msg.warning('该板块所提交的检测图片请至少选择一张😣')
					setTimeout(() => {
						store.state.pageStore.resultInfo[type].stepIndex = 0
					}, 500)
				}
				if (stepIndex.value == 2) {
					modelApi
						.getOeImageBase64({ sendImgBase64: base64Urls })
						.then((res) => {
							console.log(res)
							store.state.pageStore.resultInfo[type].base64Urls = base64Urls
							store.state.pageStore.resultInfo[type].resultBase64Url = res
							// base64Urls = []
							// base64Urls.length = 0
						})
						.catch((err) => {
							console.log(err)
						})
				}

				break
			}

			// 地物分类
			case 3: {
				if (stepIndex.value == 1 && base64Urls.length >= 1) {
					store.state.pageStore.resultInfo[type].isValidation = true
				}
				if (
					stepIndex.value == 1 &&
					store.state.pageStore.resultInfo[type].isValidation == false
				) {
					proxy.$msg.warning('该板块所提交的检测图片请至少选择一张😣')
					setTimeout(() => {
						store.state.pageStore.resultInfo[type].stepIndex = 0
					}, 500)
				}
				if (stepIndex.value == 2) {
					modelApi
						.getGcImageBase64({ sendImgBase64: base64Urls })
						.then((res) => {
							console.log(res)
							store.state.pageStore.resultInfo[type].resultBase64Url = res
							store.state.pageStore.resultInfo[type].base64Urls = base64Urls
							// base64Urls = []
							// base64Urls.length = 0
						})
						.catch((err) => {
							console.log(err)
						})
				}

				break
			}
		}
	}

	onMounted(() => {
		const flag = watch(
			() => stepIndex.value,
			(newVal, oldVal) => {
				if (stepIndex.value == 1 || stepIndex.value == 2) {
					getResultImg()
				}
				// if (stepIndex.value == 3) {
				// 	base64Urls.length = 0
				// }
			}
		)
	})

	const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
		const filetype = ['image/jpeg', 'image/jpg', 'image/png']
		console.log(rawFile.type)
		// 只能为jpg或者png或jpeg == 'image/jpeg' || 'image/jpg' || 'image/png'
		if (filetype.indexOf(rawFile.type) > -1) {
			if (rawFile.size / 1024 / 1024 < 10) {
				return true
			} else {
				ElMessage.error('上传的图片最大不能超过10MB')
				return false
			}
		} else {
			ElMessage.error('上传的图片格式只能为jpg,png或jpeg')
			return false
		}
	}

	const getFile = (uploadFile) => {
		return uploadFile
	}

	const tip = store.getters['pageStore/getTip']

	const isHidden = computed(() => {
		return stepIndex.value == 0 ? 'inline-flex' : 'none'
	})

	const blobToBase64 = (uploadFile) => {
		var reader = new FileReader()
		reader.readAsDataURL(uploadFile)
		reader.onload = function (e) {
			// console.log(reader)
			base64Url.value = String(reader.result)
			base64Urls.push(base64Url.value)
			console.log(base64Urls)
		}
	}

	// 复选框js
	const checkAll = ref(false)
	const isIndeterminate = ref(true)
	const checkedCategorys = ref([])
	const categorys = ['操场', '飞机', '油罐', '天桥']

	const handleCheckAllChange = (val: boolean) => {
		checkedCategorys.value = val ? [0, 1, 2, 3] : []
		isIndeterminate.value = false
	}
	const handleCheckedCategorysChange = (value: string[]) => {
		const checkedCount = value.length
		checkAll.value = checkedCount === categorys.length
		isIndeterminate.value = checkedCount > 0 && checkedCount < categorys.length
	}
</script>
<template>
	<div class="upload-div">
		<el-dialog v-model="dialogVisible">
			<img w-full :src="dialogImageUrl" alt="Preview Image" />
		</el-dialog>
		<div v-if="type == 1" class="checkbox-div">
			<el-checkbox
				style="margin-right: 10px"
				v-model="checkAll"
				:indeterminate="isIndeterminate"
				@change="handleCheckAllChange"
				>全选</el-checkbox
			>
			<el-checkbox-group
				v-model="checkedCategorys"
				@change="handleCheckedCategorysChange"
			>
				<el-checkbox v-for="(c, index) in categorys" :key="c" :label="index">{{
					c
				}}</el-checkbox>
			</el-checkbox-group>
		</div>
		<el-upload
			class="upload"
			list-type="picture-card"
			:before-upload="beforeAvatarUpload"
			:on-preview="handlePictureCardPreview"
			:on-remove="handleRemove"
			:file-list="fileList"
			:http-request="Upload"
			accept=".jpeg,.png,.jpg"
		>
			<template #tip>
				<div class="el-upload__tip">
					{{ tip[type > 0 ? 1 : 0] }}
				</div>
			</template>
			<el-icon class="el-icon--upload"><upload-filled /></el-icon>
			<div class="el-upload__text">单击此处上传图片</div>
		</el-upload>
	</div>
</template>
<style lang="less">
	:root {
		--el-upload-list-picture-card-size: 348px !important;
	}
	.upload-div {
		width: 100%;
		height: 100%;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		display: flex;
		position: relative;
		.upload {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			position: relative;
			> ul {
				transform: translateY(-22%);
				> li {
					width: 278px !important;
					height: 278px !important;
				}
			}
		}
	}

	// 复选框div
	.checkbox-div {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 20%;
	}

	// element框样式
	//图片框
	.el-upload-list__item-actions {
		width: 278px !important;
		height: 278px !important;
	}

	//tips
	.el-upload__tip {
		top: 24%;
		position: absolute;
	}

	//预览框
	.el-dialog {
		--el-dialog-margin-top: 5vh !important;
		width: 80% !important;
		height: 89% !important;
		overflow-y: hidden !important;
	}
	.el-overlay {
		overflow-y: hidden !important;
	}
	//预览框下的图标
	.el-icon--zoom-in {
		font-size: 30px !important;
		margin-right: 20px;
	}
	.el-icon--delete {
		font-size: 30px !important;
	}
	.el-dialog__body {
		width: 100%;
		height: 98%;
		> img {
			// object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
			object-fit: contain;
			width: 100%;
			height: 100%;
		}
	}

	//选择上传框
	.el-upload--picture-card {
		font-size: 8px;
		color: #8c939d;
		width: 278px !important;
		height: 278px !important;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		display: v-bind(isHidden) !important;
		transition: all 0.3s;
	}
	.el-upload--picture-card:hover .el-icon--upload,
	.el-upload--picture-card:hover .el-upload__text {
		color: rgb(105, 209, 200);
		transition: all 0.3s;
	}

	.el-icon--upload {
		font-size: 15em !important;
	}
	.el-upload__text {
		font-size: 22px;
	}
</style>
